import { AsyncThunk } from '@reduxjs/toolkit'
import { useCallback, useEffect } from 'react'
// import { useCallback, useEffect } from 'react'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { RootState, AppDispatch } from '.'
import { TReducers } from './reducers/reducer'
export interface AppThunk
  extends AsyncThunk<TReducers | undefined, void, {}> {}
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

// 封装自定义hooks,获取接口信息
export const useInitState = <T extends keyof RootState>(
  action:AppThunk,
  reducerName: T
) => {
  const actionCallback = useCallback(()=>{
    return action()
  },[action])
  // 获取redux的dispatch
  const dispatch = useAppDispatch()
  const state = useAppSelector(state => state[reducerName])
  // 调用useEffect获取个人用户信息的接口
  useEffect(() => {
    dispatch(actionCallback())
  }, [dispatch,actionCallback])
  return state
}
